<template>
  <div class="content-wrapper">
    <div class="content-header">知识库管理</div>
    <div class="content-container">
      <div>
        <el-form :inline="true" :model="listQuery" class="filter-container">
          <el-form-item label="知识库名称">
            <el-input
              v-model.trim="listQuery.repositoryName"
              placeholder="请输入知识库名称"
              class="filter-item"
            />
          </el-form-item>
          <el-form-item>
            <el-button
              class="filter-item"
              size="small"
              round
              type="primary"
              icon="el-icon-search"
              @click="handleFilter"
              >搜索</el-button
            >
            <el-button
              class="filter-item"
              size="small"
              round
              icon="el-icon-plus"
              @click="handleCreate"
              >新增</el-button
            >
          </el-form-item>
        </el-form>
        <el-table v-loading="listLoading" :data="list" highlight-current-row>
          <el-table-column label="名称" prop="repositoryName" min-width="200">
            <template slot-scope="{ row }">
              <span>
                <i class="iconfont el-icon-allzhishiku" />
                <router-link
                  :to="{
                    path: '/document/file/' + row.repositoryId,
                    query: { repositoryName: row.repositoryName }
                  }"
                  >{{ row.repositoryName }}</router-link
                >
              </span>
            </template>
          </el-table-column>
          <el-table-column label="隶属于" prop="belongToName" width="150px" />
          <el-table-column
            label="访问时间"
            prop="accessTime"
            width="180px"
            align="center"
          />
          <el-table-column align="center" width="60px">
            <template slot-scope="{ row, $index }">
              <el-dropdown trigger="click" class="filter-item">
                <i class="el-icon-more" />
                <el-dropdown-menu slot="dropdown" class="user-dropdown">
                  <el-dropdown-item @click.native="change(row)"
                    >设置</el-dropdown-item
                  >
                </el-dropdown-menu>
              </el-dropdown>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-drawer
        :title="textMap[drawerStatus]"
        :visible.sync="showDrawer"
        direction="rtl"
      >
        <div>
          <el-form
            ref="dataForm"
            :rules="rules"
            :model="temp"
            label-position="right"
            label-width="100px"
          >
            <!--            <el-form-item label="隶属于" prop="belongType">-->
            <!--              <el-radio-group v-model="temp.belongType" @change="belongTypechange">-->
            <!--                <el-radio :label="0">个人</el-radio>-->
            <!--                <el-radio :label="1">团队</el-radio>-->
            <!--              </el-radio-group>-->
            <!--            </el-form-item>-->
            <el-form-item
              v-if="temp.belongType === 1"
              label="隶属团队"
              prop="belongTo"
            >
              <el-select v-model="temp.belongTo">
                <el-option
                  v-for="item in userGroupList"
                  :key="item.value"
                  :label="item.teamName"
                  :value="item.teamId"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="知识库名称" prop="repositoryName">
              <el-input v-model.trim="temp.repositoryName" />
            </el-form-item>
            <el-form-item label="备注" prop="memo">
              <el-input
                v-model="temp.memo"
                maxlength="200"
                type="textarea"
                @input="changeInput"
              />
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                @click="drawerStatus === 'create' ? createData() : updateData()"
                >提交</el-button
              >
            </el-form-item>
          </el-form>
        </div>
      </el-drawer>
    </div>
  </div>
</template>

<script>
import {
  pageRepository,
  saveRepository,
  updateRepository
} from '@/api/fd/repository'
import { listJoined } from '@/api/uc/team'

export default {
  components: {},
  data() {
    return {
      list: null,
      total: 0,
      listLoading: true,
      listQuery: {
        pageNumber: 1,
        pageIndex: 0,
        pageSize: 20,
        belongType: 1,
        repositoryName: null
      },
      showDrawer: false,
      drawerStatus: '',
      textMap: {
        update: '修改知识库',
        create: '新增知识库'
      },
      temp: {
        repositoryId: null,
        belongType: 1,
        belongTo: null,
        repositoryName: null
      },
      rules: {
        belongTo: [
          { required: true, message: '隶属团队不能为空', trigger: 'change' }
        ],
        repositoryName: [
          { required: true, message: '知识库名称不能为空', trigger: 'blur' }
        ]
      },
      userGroupList: []
    }
  },
  mounted() {
    this.getList()
    this.getUserGroup()
  },
  methods: {
    changeInput(e) {
      this.$forceUpdate()
    },
    getUserGroup() {
      listJoined({ role: 1 }).then((res) => {
        if (res.code === 1) {
          this.userGroupList = res.data
          console.log(this.userGroupList, 'this.userGroupList')
        }
      })
    },
    belongTypechange(value) {
      this.temp.belongTo = null
    },
    change(row) {
      this.drawerStatus = 'update'
      this.showDrawer = true
      this.temp.repositoryId = row.repositoryId
      this.temp.belongType = row.belongType
      this.temp.belongTo = row.belongToName
      this.temp.repositoryName = row.repositoryName
      this.temp.memo = row.memo
      this.temp.permission = row.permission
    },
    getList() {
      this.listQuery.pageIndex = this.listQuery.pageNumber - 1
      this.listLoading = true
      pageRepository(this.listQuery)
        .then((res) => {
          this.total = res.data.total
          this.list = res.data.rows
          this.listLoading = false
        })
        .finally(() => {
          this.listLoading = false
        })
    },
    handleFilter() {
      this.listQuery.pageNumber = 1
      this.getList()
    },
    resetTemp() {
      this.temp = {
        repositoryId: null,
        belongType: 1,
        belongTo: null,
        repositoryName: null
      }
    },
    handleCreate() {
      this.resetTemp()
      this.drawerStatus = 'create'
      this.showDrawer = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    createData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          saveRepository(this.$refs['dataForm'].model).then((res) => {
            if (res.code === 1) {
              this.showDrawer = false
              this.getList()
              this.$message({
                message: '添加成功',
                type: 'success'
              })
            }
          })
        }
      })
    },
    handleUpdate(row) {
      this.temp = Object.assign({}, row) // copy obj
      this.drawerStatus = 'update'
      this.showDrawer = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    updateData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          const tempData = Object.assign({}, this.temp)
          updateRepository(tempData).then((res) => {
            if (res.code === 1) {
              this.getList()
              this.showDrawer = false
              this.$message({
                message: '修改成功',
                type: 'success'
              })
            }
          })
        }
      })
    },
    handleDelete(row, index) {
      this.$confirm('此操作将删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {})
        .catch(() => {
          // do nothing
        })
    }
  }
}
</script>
